<!-- #layout name=empty -->
<div class="container" id="app">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
      <div class="block-small-form">
        <div class="logo">
          <img src="/_Admin/Images/logo-blue.png" alt="Logo" />
        </div>
        <kb-form :model="model" :rules="rules" ref="form">
          <kb-form-item prop="password">
            <label class="sr-only">New password</label>
            <input
              class="form-control"
              type="password"
              placeholder="New password"
              v-model="model.password"
            />
          </kb-form-item>
          <kb-form-item prop="confirmPassword">
            <label class="sr-only">Confirm password</label>
            <input
              class="form-control"
              type="password"
              placeholder="Confirm password"
              v-model="model.confirmPassword"
            />
          </kb-form-item>
          <kb-form-item>
            <button class="btn blue pull-right" @click="onSubmit">Reset</button>
          </kb-form-item>
        </kb-form>
      </div>
    </div>
  </div>
</div>

<script src="/_Admin/Scripts/components/kbForm.js"></script>

<script>
  new Vue({
    el: "#app",
    data: function() {
      var me = this;
      return {
        model: {
          token: Kooboo.getQueryString("token"),
          password: "",
          confirmPassword: ""
        },
        rules: {
          password: [
            { required: Kooboo.text.validation.required },
            {
              min: 1,
              max: 30,
              message:
                Kooboo.text.validation.minLength +
                1 +
                ", " +
                Kooboo.text.validation.maxLength +
                30
            }
          ],
          confirmPassword: [
            { required: Kooboo.text.validation.required },
            {
              validate: function(value) {
                return value == me.model.password;
              },
              message: Kooboo.text.validation.notEqual
            }
          ]
        }
      };
    },
    methods: {
      onSubmit: function() {
        if (this.$refs.form.validate()) {
          Kooboo.User.ResetPassword(this.model).then(function(res) {
            if (res.success) {
              location.href = Kooboo.Route.Get(Kooboo.Route.User.LoginPage);
            }
          });
        }
      }
    }
  });
</script>
